<template>
  <div class="app-container">
    <div class="container">
      <div class="handle-box">
        <el-button
          size="small"
          type="success"
          @click="onEdit(0)">
          <i class="icon icon-tianjia"></i>&nbsp;添加商品
        </el-button>
      </div>

      <el-table
        v-loading="listLoading"
        :data="tableData"
        style="width: 100%;margin-top:10px;"
        ref="multipconstable">
        <el-table-column prop="title" label="商品名">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="100px">
        </el-table-column>
        <el-table-column prop="desc_price" label="原价" width="100px">
        </el-table-column>
        <el-table-column prop="store" label="数量" width="80px">
        </el-table-column>
        <el-table-column label="开始时间" width="160px">
          <template slot-scope="scope">
            <span>{{ scope.row.start_time | date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" width="160px">
          <template slot-scope="scope">
            <span>{{ scope.row.end_time | date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发货时间" width="160px">
          <template slot-scope="scope">
            <span>{{ scope.row.send_time | date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleEdit(scope.$index, scope.row)"
              class="ml-0 mb-1">编辑</el-button>
            <el-button
              type="text"
              @click="handleEdit(scope.$index, scope.row)"
              class="ml-0 mb-1">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
  </div>
</template>

<script>
import { list } from '../../api/groupbar'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      tableKey: 0,
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        sort: '-id',
        where: [
          { field: 'status', op: 'eq', value: 1 }
        ]
      },
      tableData: [/* {
        id: 1,
        name: 'xperia 10 ii 马克兔',
        price: '2599',
        num: 10,
        start: '2020-07-01 12:00:00',
        end: '2020-07-07 12:00:00',
        express: '2020-07-10'
      } */]
    }
  },

  created() {
    this.getList()
  },

  methods: {
    onEdit(flag) {
      if (flag === 0) {
        this.$router.push({ path: '/groupbuy/group_edit' })
      } else {
        console.log('拉会计师的')
      }
    },

    getList() {
      this.listLoading = true
      list(this.listQuery).then(response => {
        this.tableData = response.data.data
        /* this.tableData = response.data.data.map(c => {
          return {
            ...c,
          }
        }) */
        this.total = response.data.total
        this.listLoading = false
      })
    },

    handleEdit(index, row) {
      console.log(index, row)
      this.$router.push({ path: '/groupbuy/group_edit', query: { id: row.id }})
    }
  }
}
</script>

<style lang="scss">
</style>
